<template>
  <Card>
    <div class="btns" style="margin-bottom:10px;">
      <Button icon="ios-add" target="_self" type="primary" @click="toAdd">添加</Button>
    </div>
    <Table
      ref="busDistributionTable"
      :columns="busDistributionColumn"
      :data="busDistributionData"
      :loading="busDistributionLoading"
      border
      size="small"
      stripe
    >
      <template slot="action" slot-scope="{ row }">
        <a
          class="edit"
          size="small"
          style="color:#2d8cf0;font-size: 12px;"
          type="text"
          @click="edit(row)"
        >编辑</a>
        <Divider type="vertical"/>
        <a class="del" style="color:#ed4014;font-size: 12px;" @click="del(row)">删除</a>
      </template>
    </Table>
    <Row class="page" justify="end" type="flex">
      <Page
        :current="searchBusDistributionForm.pageNumber"
        :page-size="searchBusDistributionForm.pageSize"
        :total="busDistributionTotal"
        show-total
        @on-change="changePage($event)"
      />
    </Row>
    <Modal
      v-model="busDistributionModalVisible"
      :mask-closable="false"
      :title="busDistributionModalTitle"
      :width="500"
    >
      <Form
        ref="busDistributionForm"
        :label-width="100"
        :model="busDistributionForm"
        :rules="busDistributionFormValidate"
      >
        <FormItem label="日期：" prop="date">
          <DatePicker
            v-model="busDistributionForm.date"
            format="yyyy-MM-dd"
            placeholder="选择日期"
            type="date"
            @on-change="busDistributionForm.date=$event"
          ></DatePicker>
        </FormItem>
        <Form-item label="车辆线路：" prop="line">
          <InputNumber v-model="busDistributionForm.line" :max="50" :min="0" :step="1"></InputNumber>
          <span style="color:red">线路选择为0时代表停运</span>
        </Form-item>
        <Form-item label="所属车队：" prop="team">
          <Select v-model="busDistributionForm.team" clearable placeholder="选择车队">
            <Option v-for="item in teamList" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </Form-item>
        <FormItem label="车牌号：" prop="license_plate_num">
          <Select
            v-model="busDistributionForm.license_plate_num"
            clearable
            filterable
            placeholder="选择车牌号"
          >
            <Option
              v-for="item in licensePlateNumList"
              :key="item.value"
              :value="item.value"
            >{{ item.label }}
            </Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="busDistributionHandleCancel">取消</Button>
        <Button
          :loading="busDistributionSubmitLoading"
          type="primary"
          @click="busDistributionHandleSubmit"
        >提交
        </Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import {licensePlateNumList} from '../../api/bus'
import {busDistributionList, destroy, getTeamlist, store, update} from '../../api/busDistribution'

export default {
  data() {
    return {
      busDistributionSubmitLoading: false,
      busDistributionModalType: 0,
      busDistributionModalVisible: false,
      busDistributionModalTitle: '',
      busDistributionForm: {
        date: '',
        line: 0,
        license_plate_num: '',
        team: ''
      },
      busDistributionFormValidate: {
        date: [{required: true, type: 'string', message: '日期不能为空', trigger: 'change'}],
        line: [{required: true, message: '线路不能为空', trigger: 'change', type: 'number'}],
        team: [{required: true, message: '车队不能为空', trigger: 'change', type: 'string'}],
        license_plate_num: [{required: true, message: '车牌号不能为空', trigger: 'change', type: 'string'}],
      },
      searchBusDistributionForm: {
        date: '',
        pageNumber: 1,
        pageSize: 10
      },
      busDistributionLoading: false,
      busDistributionData: [],
      licensePlateNumList: [],
      teamList: [],
      modal: false,
      importLoading: false,
      loading: false,
      busDistributionTotal: 0,
      busDistributionColumn: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: '日期',
          key: 'date',
          align: 'center'
        },
        {
          title: '车牌号',
          key: 'license_plate_num_title',
          align: 'center'
        },
        {
          title: '线路',
          key: 'lineTitle',
          align: 'center'
        },
        {
          title: '车队',
          key: 'team',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          width: 175,
          align: 'center'
        }
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changePage(v) {
      this.searchBusDistributionForm.pageNumber = v
      this.getBusDistributionList()
    },
    busDistributionHandleCancel() {
      this.busDistributionModalVisible = false
    },
    busDistributionHandleSubmit() {
      this.$refs.busDistributionForm.validate(valid => {
        if (valid) {
          this.busDistributionSubmitLoading = true
          if (this.busDistributionModalType === 0) {
            // 添加 避免编辑后传入id等数据 记得删除
            delete this.busDistributionForm.id
            store(this.busDistributionForm).then(res => {
              this.busDistributionSubmitLoading = false
              if (res.data) {
                this.$Message.success(res.message)
                this.getBusDistributionList()
                this.busDistributionModalVisible = false
              } else {
                this.$Message.error(res.message)
              }
            })
          } else {
            update(this.busDistributionForm, this.busDistributionForm.id).then(
              res => {
                this.busDistributionSubmitLoading = false
                if (res.data) {
                  this.$Message.success(res.message)
                  this.getBusDistributionList()
                  this.busDistributionModalVisible = false
                } else {
                  this.$Message.error(res.message)
                }
              }
            )
          }
        }
      })
    },
    del(row) {
      this.$Modal.confirm({
        title: '确认删除',
        loading: true,
        content: '您确认要删除此条数据吗？',
        onOk: () => {
          const ids = row.id
          // 批量删除
          destroy(ids).then(res => {
            this.$Modal.remove()
            if (res.data === true) {
              this.$Message.success(res.message)
              this.getBusDistributionList()
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    },
    edit(row) {
      this.busDistributionModalType = 1
      this.busDistributionModalTitle = '编辑'
      this.busDistributionForm = {
        id: row.id,
        date: row.date,
        line: row.line,
        team: row.team,
        license_plate_num: '陕G' + row.license_plate_num
      }
      this.busDistributionModalVisible = true
    },
    getBusDistributionList() {
      this.busDistributionSelectCount = 0
      this.busDistributionLoading = true
      busDistributionList(this.searchBusDistributionForm).then(res => {
        this.busDistributionLoading = false
        if (res.data) {
          this.busDistributionData = res.data.busDistributionRecord
          this.busDistributionTotal = res.data.count
        }
      })
    },
    getLicensePlateNumList() {
      licensePlateNumList().then(res => {
        const data = []
        res.data.forEach(function (e, i) {
          data.push({
            label: e,
            value: e
          })
        })
        this.licensePlateNumList = data
      })
    },
    getTeamType() {
      getTeamlist().then(res => {
        // console.log(res);
        this.teamList = res.data
      })
    },
    init() {
      this.getBusDistributionList()
      this.getLicensePlateNumList()
      this.getTeamType()
    },
    toAdd() {
      this.busDistributionModalType = 0
      this.busDistributionModalTitle = '添加'
      this.$refs.busDistributionForm.resetFields()
      delete this.busDistributionForm.id
      this.busDistributionModalVisible = true
    }
  }
}
</script>
<style>
.ivu-tabs .ivu-select-dropdown {
  left: 0 !important;
}
</style>
